<template>
	<!-- 封装歌单列表显示 -->
	<div class="playlists">
		<div
			class="item"
			v-for="item in playlists"
			:key="item.id"
            @click="navigateToSongDetail(item.id)"
		>
			<el-card shadow="hover" :body-style="{ padding: '0.5rem' }">
                    <div class="img">
                        <img :src="getUrl(item.picUrl)" />
                    </div>
                    <div class="name">
                        <p class="ellipsis">{{ item.title }}</p>
                    </div>
			</el-card>
		</div>
	</div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';
import { getUrl } from '@/utils/format';
import { useRouter } from 'vue-router';
const router = useRouter();
const navigateToSongDetail = (id:number) => {
      router.push({ name: '歌单详情', params: { id } });
}
const { playlists } = defineProps(['playlists']);
</script>

<style lang="scss" scoped>
.playlists {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr; // 使每行的高度一致
    .item {
        height: 20rem; // 设置卡片的固定高度
        width: 16rem; // 设置卡片的固定宽度
        margin: 1rem 0.5rem;
        cursor: pointer;

        .img {
            position: relative;
            width: 100%; // 图片容器宽度为100%
            height: 70%; // 图片容器高度为70%，留下30%的空间用于标题和其他元素

            img {
                width: 100%; // 图片宽度为100%
                height: 100%; // 图片高度为100%
                object-fit: cover; // 图片将会按比例扩大或缩小，以填充容器，可能会被剪裁
            }
        }

        .name {
            p {
                overflow: hidden; // 隐藏超出的文本
                text-overflow: ellipsis; // 使用省略号表示隐藏的文本
                white-space: nowrap; // 不折行
            }
        }
    }
}
</style>
